<template>
  <div class="odpagebigbox">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-tabs v-model="active" animated>
      <van-tab
        v-for="(item, index) in ['待付款', '待收货', '已完成']"
        :title="item"
        :key="index"
        v-model="active"
      >
        <div v-if="item == '待付款'">
          <div v-for="item in fukuan" :key="item?.specification" class="swcell">
            <van-card
              :num="item.num"
              :price="item.price"
              :desc="item?.specification"
              :title="item.name"
              :thumb="item.imgs"
              style="width: 100vw"
            />

            <div class="bottom">
              <div style="font-size: 14rem">
                待支付<span style="color: brown; font-size: 18rem"
                  >￥{{ item.price * item.num }}</span
                >
              </div>

              <div class="btns">
                <div class="btn1" @click="paydelitem(item)">取消订单</div>
                <div class="btn2" @click="paying(item)">支付</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item == '待收货'">
          <div
            v-for="item in shouhuo"
            :key="item?.specification"
            class="swcell"
          >
            <van-card
              :num="item.num"
              :price="item.price"
              :desc="item?.specification"
              :title="item.name"
              :thumb="item.imgs"
              style="width: 100vw"
            />

            <div class="bottom">
              <div style="font-size: 14rem">
                订单号:<span>{{ item.DDH }}</span
                ><br />
                <span style="color: #999999">地址{{ uesrs.loch[0].city }}</span>
              </div>

              <div class="btns" style="justify-content: right">
                <!-- <div class="btn1">取消订单</div> -->
                <div class="btn2" @click="enterItem(item)">确认收货</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item == '已完成'">
          <div
            v-for="item in wancheng"
            :key="item?.specification"
            class="swcell"
          >
            <van-card
              :num="item.num"
              :price="item.price * item.num"
              :desc="item?.specification"
              :title="item.name"
              :thumb="item.imgs"
              style="width: 100vw"
            />

            <div class="bottom">
              <div style="font-size: 14rem">
                订单号:<span>{{ item.DDH }}</span
                ><br />
                <span style="color: #999999">地址{{ uesrs.loch[0].city }}</span>
              </div>

              <div class="btns" style="justify-content: right">
                <!-- <div class="btn1">取消订单</div> -->
                <div class="btn1" style="width: 100rem">订单已完成</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <van-popup
      v-model="payentshow"
      position="bottom"
      :style="{ height: '60vh' }"
      round
    >
      <div
        style="
          width: 100vw;
          font-size: 30rem;
          text-align: center;
          margin-top: 20rem;
          margin-bottom: 10rem;
        "
      >
        请输入支付密码
      </div>
      <van-password-input
        :value="PayPassword"
        :focused="payentshow"
        @focus="payentshow = true"
        :mask="false"
        :length="6"
      />

      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="PayPassword"
        :show="payentshow"
        @blur="payentshow = false"
      />
    </van-popup>
  </div>
</template>














<script>
import { Toast, Dialog } from "vant";
import { mapMutations } from "vuex";

export default {
  name: "OrderPage",
  data() {
    return {
      // 选中下标
      active: 0,
      // 输入密码
      PayPassword: "",
      // 输入支付密码弹窗
      payentshow: false,
      // // 待支付订单
      submititem: null,

      // 要取消的订单
      delitems:null,
    };
  },

  created() {
    if (this.$route.query.tag) {
      this.active = Number(this.$route.query.tag);
    }
  },

  methods: {
    ...mapMutations(["setshop", "delpayitem"]),

    paying(item) {
      this.submititem = item;
      this.payentshow = true;
    },

    // 取消订单
    paydelitem(item) {
      this.delitems = item;
      Dialog.confirm({

        message: "确定要取消订单吗？",
      })
        .then(() => {
          console.log("取消订单",this.delitems);
          this.delpayitem(this.delitems);
          
        })
        .catch(() => {
          // on cancel
        });

    },

    // 确认收货

    enterItem(item) {
      this.submititem = item;
      // this.
      Dialog.confirm({
        // title: "标题",
        message: "确定要确认收货吗?",
      })
        .then(() => {
          console.log("确认");
          this.setshop({ arrs: [this.submititem], qianshouS: "over" });
        })
        .catch(() => {
          console.log("取消");
          this.submititem = null;
          // on cancel
        });
    },
  },
  computed: {
    // 获取用户信息
    uesrs() {
      return this.$store.state.uese;
    },
    fukuan() {
      return this.$store.getters.pendingPayment;
    },
    shouhuo() {
      return this.$store.getters.toBeReceived;
    },
    wancheng() {
      return this.$store.getters.done;
    },
  },
  watch: {
    PayPassword(newV) {
      if (newV.length >= 6) {
        if (newV == this.uesrs.payPassword) {
          Toast("支付成功");

          this.setshop({ arrs: [this.submititem], qianshouS: "shouhuo" });

          this.payentshow = false;

          this.PayPassword = "";

          this.submititem = null;
        } else {
          Toast("支付密码错误");

          this.PayPassword = "";
        }
      }
    },
  },
};
</script>

















<style lang="less" scoped>
.odpagebigbox {
  width: 100vw;
}

// 商品项
.swcell {
  width: 100vw;
  margin-bottom: 30rem;
  padding: 20rem 0;
  background-color: #fafafa;
  border-radius: 10rem;
}

// 底部价格按钮组
.bottom {
  margin-top: 20rem;
  width: 100vw;
  padding: 0 20rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

  .btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14rem;
    width: 150rem;

    .btn1 {
      padding: 10rem 5;
      border-radius: 5rem;
      border: 1px solid rgb(243, 92, 5);
      color: rgb(243, 92, 5);
      width: 65rem;
      height: 25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn2 {
      padding: 10rem 5;
      color: white;
      background-color: rgb(243, 92, 5);
      width: 65rem;
      height: 25rem;
      border-radius: 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>